<template>
  <div class="tabArea">
    <el-radio-group v-model="activeName" @change="tabChange">
      <el-radio v-for="(item, index) in dataTrigger" :key="index" :label="item.name" :text-color="textColor">{{
        item.label
      }}</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'CTabs',
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    }
  },
  data() {
    return {
      activeName: '',
      textColor: '',
      timer: null
    }
  },
  computed: {
    dataTrigger: {
      get() {
        if (this.props[1].fields[0].value.dataJson.json) {
          const result = this.props[1].fields[0].value.dataJson.json
          return this.getResult(result)
        }
        return []
      },
      set(val) {}
    },
    cycleData() {
      return this.props[0].fields[3].value[0].value.value
    }
  },
  watch: {
    cycleData(newValue) {
      if (!newValue) {
        this.clearInterval()
      } else {
        this.startInterval()
      }
    },
    dataTrigger: {
      handler(val) {
        const componentIds = val.map(item => item.componentId)
        componentIds.forEach(item => {
          const dom = document.querySelector("div[_id='" + item + "']")
          dom.style.display = 'none'
        })
        const obj = val.find(item => item.name === this.activeName)
        const componentId = obj.componentId
        if (componentId) {
          document.querySelector("div[_id='" + componentId + "']").style.display = 'block'
        }
      },
      deep: true
    },
    activeName: {
      handler(newVal, oldValue) {
        const Oldobj = this.dataTrigger.find(item => item.name === oldValue)
        let oldcomponentId = ''
        if (Oldobj) {
          oldcomponentId = Oldobj.componentId
        }
        if (oldcomponentId) {
          document.querySelector("div[_id='" + oldcomponentId + "']").style.display = 'none'
        }
        const obj = this.dataTrigger.find(item => item.name === newVal)
        const componentId = obj.componentId
        if (componentId) {
          document.querySelector("div[_id='" + componentId + "']").style.display = 'block'
        }
      },
      immediate: true
    }
  },
  mounted() {
    if (this.cycleData) {
      this.startInterval()
    }
  },
  beforeDestroy() {
    this.clearInterval()
  },
  methods: {
    // 清除计时器
    clearInterval() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    startInterval() {
      let index = 0
      this.activeName = this.dataTrigger[index].name
      this.timer = setInterval(() => {
        index++
        if (index > this.dataTrigger.length - 1) {
          index = 0
        }
        this.activeName = this.dataTrigger[index].name
      }, 10000)
    },
    getResult(json) {
      let jsonArray = []
      try {
        jsonArray = JSON.parse(json)
      } catch (e) {
        console.warn(e.message)
      }
      const model = this.props[1].fields[0].value.dataJson.model
      const fieldHref = model[0].field
      const mappingHref = model[0].mapping
      const keyHref = mappingHref || fieldHref

      const fieldTitle = model[1].field
      const mappingTitle = model[1].mapping
      const keyTitle = mappingTitle || fieldTitle

      if (jsonArray.length > 0) {
        const outJson = []
        jsonArray.forEach(element => {
          outJson.push({
            name: element[keyHref],
            label: element[keyTitle],
            componentId: element.componentId ? element.componentId : ''
          })
        })
        return outJson
      } else {
        return jsonArray
      }
    },
    tabChange(val) {}
  }
}
</script>
<style lang="stylus" scoped>
.tabArea {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
>>> {
	.el-radio__label {
		color: #fff;
	}
}
</style>
